<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品卡片布局</title>
	</head>
	<style>
		/*思路：1.取出元素默认外边框【统配选择器】设置背景颜色
				2.product_card 设置样式：内边距
				加阴影，所有内容--居中： text-align：center
				3.图片边框倒角，外边距？
				4.小米su7  文字 ：外边距
				5.￥279999.00 文字大小，外边距？
				6.颜色，外边距？ 内边距？
		*/
	   div{
		   margin: 50px;
		   width: 265px;
		   height: 500px;
		   box-shadow: 5px 5px 50px 10px #e4e4e4;
	   }
	   #product_card{
		   margin: 10px;
		   padding: 10px;
	   }
	   h4{
		margin-left: 100px; 
	   }
	   #p1{
		   color: red;
		   font-size: 20px;
		   font-weight: bold;
		   margin-left: 60px;
	   }
	   p{
		   font-size: 9px;
		   margin-left: 85px;
		   color: #b8b8b8;
	   }
	   span{
		   margin: 0px 5px;
	   }
	   #搜索{
		   border: 1px solid transparent;
		   border-radius: 5px;
		   width: 150px;
		   height: 30px;
		   
	   }
	   input{
		   font-size: 10px;
		   text-decoration: none;
	   }
	   button{
		   border: 0px solid transparent;
		   color: white;
		   background-color: red;
		   position: relative;
		   top: -25px;
		   left: 44px;
		   border-radius: 5px;
		   top: ;
		   margin: 0px 0px 0px 100px;
	   }
	</style>
	<body>
		<div id="product_card">
			<img src="img/s7.jpg" alt="小米s7" width="260px" height="358px" >
			<h4>小米su7</h4>
			<p id="p1">￥279999.00</p>
			<p>已有<span>10万＋</span>人评价</p>
		</div>
		<!-- <div id="搜索">
			<input type="" placeholder="搜索 京东商品" />
			<button>搜索</button>
		</div> -->
	</body>
</html>